<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="sports-course-detail">
    <!-- 视频预览 -->
    <section class="video-display">
        <span class="iconfont icon-zuojiantou1"></span>
        <video src="#" id="video"></video>
        <div>
            <span class="iconfont icon-bofang" id="play"></span>
            <p>视频预览</p>
        </div>
    </section>
    <!-- 主体 -->
    <main class="main">
        <!-- 主体内容 -->
        <section class="content">
            <h4>巧克力</h4>
            <di class="desc-render">
                <div>
                    <span id="time">15</span>分钟&emsp;&emsp;
                    <span id="calorie">45</span>千卡
                </div>
                <p>99.99w人练过<span class="iconfont icon-youjiantou"></span></p>
            </di>
        </section>
        <!-- 个人介绍 -->
        <section class="info">
            <div class="info-content">
                <img src="../../assets/images/user-img.jpg" alt="">
                <div>
                    <h4>用户名</h4>
                    <p>三线达人课程设计师</p>
                </div>
                <span>+关注</span>
            </div>
            <!-- 文字介绍 -->
            <p id="text">
                15分钟带你走进
            </p>
            <!-- 建议 -->
            <div class="adv">
                <div>
                    <p>
                        <span class="iconfont icon-mulu"></span>练习频率
                    </p>
                    <i>每周3-5次</i>
                </div>
                <i class="dashed"></i>
                <div>
                    <p>
                        <span class="iconfont icon-juzhong"></span>器械
                    </p>
                    <i>无</i>
                </div>
            </div>
        </section>

        <a href="sports_course_play.html" id="startBtn">开始训练</a>
    </main>
</body>

</html>